<template>
<div>
	<!-- 1. metadata -->
	<div class="row">
		<div class="col-md-12">
			<div class="card card-secondary card-outline">
				<div class="card-body p-2">
					<dl class="row mb-0">
						<dt class="col-sm-3">创建时间</dt><dd class="col-sm-9">{{ this.getTimestampString(metadata.creationTimestamp)}} ago ({{ metadata.creationTimestamp }})</dd>
						<dt class="col-sm-3">名称</dt><dd class="col-sm-9">{{ metadata.name }}</dd>
						<dt class="col-sm-3">命名空间</dt><dd class="col-sm-9">{{ metadata.namespace }}</dd>
						<dt class="col-sm-3">消息</dt><dd class="col-sm-9">{{ info.message }}</dd>
						<dt class="col-sm-3">原因</dt><dd class="col-sm-9">{{ info.reason }}</dd>
						<dt class="col-sm-3">来源</dt><dd class="col-sm-9"><span v-for="(val, idx) in info.source" v-bind:key="idx">{{ val }} </span></dd>
						<dt class="col-sm-3">第一次观测时间</dt><dd class="col-sm-9"><span v-if="info.firstSeen">{{ this.getTimestampString(info.firstSeen)}} ago ({{ info.firstSeen }})</span><span v-else>-</span></dd>
						<dt class="col-sm-3">最近观测时间</dt><dd class="col-sm-9"><span v-if="info.lastSeen">{{ this.getTimestampString(info.lastSeen)}} ago ({{ info.lastSeen }})</span><span v-else>-</span></dd>
						<dt class="col-sm-3">总数</dt><dd class="col-sm-9">{{ info.count ? info.count : '-' }}</dd>
						<dt class="col-sm-3">类型</dt><dd class="col-sm-9"><span v-bind:class="{'text-warning':info.type=='Warning'}">{{ info.type }}</span></dd>
					</dl>
				</div>
			</div>
		</div>
	</div>
	<!-- 2. Involved object -->
	<div class="row">
		<div class="col-md-12">
			<div class="card card-secondary card-outline m-0">
				<div class="card-header p-2"><h3 class="card-title">Involved object</h3></div>
				<div class="card-body p-2">
					<b-table-lite striped hover small :items="involvedObject" :fields="fields">
						<template v-slot:cell(name)="data">
							<a href="#" @click="$emit('navigate', getViewLink(data.item.group, data.item.resource, data.item.namespace, data.value))">{{ data.value }}</a>
						</template>
					</b-table-lite>
				</div>
			</div>
		</div>
	</div>
</div>
</template>
<script>

export default {
	props:["value"],
	data() {
		return {
			metadata: {},
			info: {},
			involvedObject: [],
			fields: [
				{ key: "name", label: "名称" },
				{ key: "namespace", label: "命名空间"  },
				{ key: "kind", label: "类型" },
				{ key: "fieldPath", label: "路径" },
			],
		}
	},
	watch: {
		value(d) { this.onSync(d) }
	},
	methods: {
		onSync(data) {
			if(!data) return
			this.metadata = data.metadata;
			this.info = {
				message: data.message,
				reason: data.reason,
				source: Object.entries(data.source).map(([_, value]) => `${value}`),
				firstSeen: data.firstTimestamp,
				lastSeen: data.lastTimestamp,
				count: data.count,
				type: data.type,
			};
			this.involvedObject = [this.getResource(data.involvedObject)];
			this.involvedObject[0]["fieldPath"] = data.involvedObject["fieldPath"]
		}
	}
}
</script>
